<template>
  <div class="demo">
    <group-header></group-header>
    <section class="container">
      <group-tab></group-tab>
      <group-content></group-content>
    </section>
    <change-modal></change-modal>
    <group-tab-tools></group-tab-tools>
  </div>
</template>

<script type="text/ecmascript-6">
  import GroupHeader from './group-header/group-header'
  import GroupTab from './group-tab/group-tab'
  import GroupContent from './group-content/group-content'
  import ChangeModal from './change-modal/change-modal'
  import GroupTabTools from './group-tab-tools/group-tab-tools'
  const PAGE_NAME = 'DEMO'
  const TITLE = 'lizi'

  export default {
    name: PAGE_NAME,
    components: {
      GroupHeader,
      GroupTab,
      GroupContent,
      ChangeModal,
      GroupTabTools
    },
    page: {
      title: TITLE
    },
    data() {
      return {

      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@design"

  .demo
    margin :20px
    height :500px
    background #fff
    layout(column)
    .container
      flex: 1
      layout(row,block,nowrap)
</style>
